<template>
  <div class="prescription-details-page">
    <van-nav-bar title="费用详情" left-arrow @click-left="goBack" />
    
    <!-- 患者信息卡片 -->
    <div class="patient-info-card">
      <div class="patient-details">
        <div class="detail-row">
          <span class="label">姓名:</span>
          <span class="value">{{ patientName }}</span>
        </div>
        <!-- <div class="detail-row">
          <span class="label">性别:</span>
          <span class="value">{{ patientGender }}</span>
        </div> -->
        <!-- <div class="detail-row">
          <span class="label">年龄:</span>
          <span class="value">{{ patientAge }}岁</span>
        </div> -->
        <div class="detail-row">
          <span class="label">报告日期:</span>
          <span class="value">{{ formatDate(visitTime) }}</span>
        </div>
      </div>
      <div class="total-cost">
        合计: ¥{{ totalFee.toFixed(2) }}
      </div>
    </div>

    <!-- 费用明细 -->
    <div class="expense-details-card">
      <div class="card-header">
        <h3>费用明细</h3>
      </div>
      
      <div v-if="loading" class="loading-container">
        <van-loading type="spinner" size="24px">加载中...</van-loading>
      </div>
      
      <div v-else-if="prescriptionMedicines.length === 0" class="empty-container">
        <van-empty description="暂无处方信息" />
      </div>
      
      <div v-else class="medicine-list">
        <div 
          v-for="medicine in prescriptionMedicines" 
          :key="medicine.prescriptionMedicineId"
          class="medicine-item"
        >
          <div class="medicine-name">
            {{ medicine.medicineName }}
          </div>
          <div class="medicine-details">
            <span class="unit-price">单价: ¥{{ medicine.unitprice.toFixed(2) }}</span>
            <span class="quantity">数量: {{ medicine.quantity }}</span>
          </div>
          <div class="medicine-total">
            ¥{{ (medicine.unitprice * medicine.quantity).toFixed(2) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { api, type PrescriptionMedicine } from '../../api'

const router = useRouter()
const route = useRoute()

// 响应式数据
const prescriptionMedicines = ref<PrescriptionMedicine[]>([])
const loading = ref(false)

// 从路由参数获取信息
const visitrecordId = computed(() => parseInt(route.params.visitrecordId as string))
const patientName = computed(() => route.query.patientName as string || '')
const departmentName = computed(() => route.query.departmentName as string || '')
const doctorName = computed(() => route.query.doctorName as string || '')
const visitTime = computed(() => route.query.visitTime as string || '')
const totalFee = computed(() => parseFloat(route.query.totalFee as string) || 0)

// 模拟患者信息（实际项目中应该从API获取）
const patientGender = ref('女')
const patientAge = ref(24)

// 方法
const goBack = () => {
  router.back()
}

const formatDate = (dateTime: string) => {
  if (!dateTime) return ''
  const date = new Date(dateTime)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  }).replace(/\//g, '-')
}

const loadPrescriptionMedicines = async () => {
  if (!visitrecordId.value) return
  
  loading.value = true
  try {
    const response = await api.getPrescriptionMedicines(visitrecordId.value)
    if (response.data) {
      prescriptionMedicines.value = response.data
    }
  } catch (error) {
    console.error('获取处方药品信息失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadPrescriptionMedicines()
})
</script>

<style scoped>
.prescription-details-page {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.patient-info-card {
  margin: 16px;
  padding: 16px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  position: relative;
}

.patient-details {
  margin-bottom: 16px;
}

.detail-row {
  display: flex;
  margin-bottom: 8px;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.label {
  width: 80px;
  font-size: 14px;
  color: #646566;
}

.value {
  font-size: 14px;
  color: #323233;
}

.total-cost {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-size: 16px;
  font-weight: 500;
  color: #ee0a24;
}

.expense-details-card {
  margin: 0 16px 16px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.card-header {
  padding: 16px 16px 0;
  border-bottom: 1px solid #ebedf0;
}

.card-header h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 500;
  color: #323233;
}

.loading-container,
.empty-container {
  padding: 40px 16px;
  text-align: center;
}

.medicine-list {
  padding: 16px;
}

.medicine-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #ebedf0;
}

.medicine-item:last-child {
  border-bottom: none;
}

.medicine-name {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: #323233;
  margin-right: 12px;
}

.medicine-details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 12px;
}

.unit-price,
.quantity {
  font-size: 13px;
  color: #646566;
  margin-bottom: 2px;
}

.quantity {
  margin-bottom: 0;
}

.medicine-total {
  font-size: 15px;
  font-weight: 500;
  color: #323233;
  min-width: 60px;
  text-align: right;
}
</style>
